// 系统库
import React, {Component, Fragment} from 'react';
import {connect} from 'react-redux';
import userAction from '../../store/actions/userList';
import roleAction from '../../store/actions/roleList';
import Header from './Header';
import UserTableList from './UserTableList';
import {delUser} from '../../api';
import {Pagination} from 'antd';

import '../../../node_modules/animate.css/animate.css';


class UserList extends Component {
  state = {
    visible: false,
    data: {},
    current: 1
  };

  // 抽屉打开
  showDrawer = () => {
    this.setState(prevState => {
      return {
        visible: true
      };
    });

  };

  // 抽屉关闭
  onClose = () => {
    this.setState(prevState => {
      return {
        visible: false,
        data: {}
      };
    });
  };

  // 用户编辑处理
  userEdit = data => {
    this.setState(prevState => {
      return {
        visible: true,
        data
      };
    });
  };
  // 用户删除处理
  roleDel = data => {
    delUser(data.id).then(res => {
      this.props.GET_USER_LIST();
      this.props.GET_ROLE_LIST();
    }).catch(err => {
      console.log(err);
    });
  };

  pageChange = page => {
    this.setState({
      current: page
    });
    this.props.GET_USER_LIST(page);
    // this.props.GET_ROLE_LIST()
  };

  componentDidMount() {
    this.props.GET_USER_LIST();
    // this.props.GET_ROLE_LIST()
  }

  render() {
    const {visible, data} = this.state;
    const {userListData, userPageSize} = this.props;
    return (
      <div className='animated slideInDown'>
        <Header
          visible={visible}
          showDrawer={this.showDrawer}
          onClose={this.onClose}
          data={data}
        />
        <UserTableList userListData={userListData} userEdit={this.userEdit} roleDel={this.roleDel}/>
        <Pagination
          current={this.state.current}
          onChange={this.pageChange}
          total={userPageSize ? userPageSize : 1}
          style={{textAlign: 'center', marginTop: '20px'}}
          hideOnSinglePage
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    ...state.userList,
    ...state.roleList
  };
};
export default connect(mapStateToProps, {...userAction, ...roleAction})(UserList);
